<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>drawClock画时钟</title>
    <style type="text/css">
        div{
            text-align: center;
            margin-top: 20px;
        }
        #myCanvas{
            border: 1px dashed blue;
        }
    </style>
</head>
<body>
    <div>
        <canvas id="myCanvas" width="600" height="600"></canvas>
    </div>
    <script type="text/javascript">
        var myCanvas=document.getElementById("myCanvas");
        var ctx=myCanvas.getContext("2d");
        var width=ctx.canvas.width;
        var height=ctx.canvas.height;
        var PI=Math.PI;//引用Math方法
        // console.log(width,height);
        var r=width/2;
        //把原点设为画布中心点
        ctx.translate(r,r);
        //画静态表盘
        function drawClockface(){
             //保存当前环境的状态
            ctx.save();
            var arcx=0;//圆心x轴坐标
            var arcy=0;//圆心y轴坐标
            //画表盘外圈
            ctx.beginPath();
            ctx.lineWidth=8;//线宽
            ctx.arc(arcx,arcy,r-4,0*PI,2*PI);
            ctx.strokeStyle="purple";
            ctx.stroke();
            ctx.beginPath();
            //画表盘中心点
            ctx.globalCompositeOperation="destination-over";//让中心点在所有层级之上
            ctx.fillStyle="aqua";
            ctx.arc(0,0,12,0,2*PI);
            ctx.fill();
            //画数字
            var numbers=[3,4,5,6,7,8,9,10,11,12,1,2];
            //遍历数字，把每个数字画出
            numbers.forEach(function(number,index){
                ctx.fillStyle="green";
                ctx.font="60px Arial";
                ctx.textAlign="center";
                ctx.textBaseline="middle";
              var rad=2*PI/12*index;//每一个点的所对应的弧度
              var dotX=(r-60)*Math.cos(rad);
              var dotY=(r-60)*Math.sin(rad);
              ctx.fillText(number,dotX,dotY);
            });
            //画秒的点
            for(var i=0;i<60;i++){
                ctx.beginPath();
                // ctx.textAlign="center";
                // ctx.textBaseline="middle";
                // ctx.font="40px Arial";
                var rad=2*PI/60*i;//计算i所在的弧度
                var dotX=(r-20)*Math.cos(rad);
                var dotY=(r-20)*Math.sin(rad);
                if(i%5==0){
                    ctx.fillStyle="#000";
                    ctx.arc(dotX,dotY,4,0,2*PI);
                    ctx.fill();
                }else{
                    ctx.fillStyle="#ccc";
                    ctx.arc(dotX,dotY,3,0,2*PI);
                    ctx.fill();
                }
            }
        }
        //画时针
        function drawHourHand(h,m){
             //保存当前环境的状态
            ctx.save();
            h=h*PI/6;
            m=m*PI/60;
            //时针旋转弧度
            var rad=h+m/12;
            ctx.beginPath();
            ctx.lineWidth=12;
            ctx.strokeStyle="black";
            ctx.rotate(rad);
            ctx.moveTo(0,20);
            ctx.lineTo(0,-120);
            ctx.stroke();
            // 返回之前保存过的路径状态和属性
            ctx.restore();
        }
        //画分针
        function drawMinuteHand(m,s){
             //保存当前环境的状态
            ctx.save();
            ctx.beginPath();
            ctx.lineWidth=8;
            //分针旋转弧度
            var rad=PI/30*m+PI/1800*s;
            ctx.fillStyle="yellow";
            ctx.rotate(rad);
            ctx.moveTo(-8,20);
            ctx.lineTo(8,20);
            ctx.lineTo(4,-200)
            ctx.lineTo(-4,-200);
            ctx.closePath();
            ctx.fill();
            // 返回之前保存过的路径状态和属性
            ctx.restore();
        }
        // 画秒针
        function drawSecondHand(s){
            //保存当前环境的状态
            ctx.save();
            ctx.beginPath();
            ctx.lineWidth=3;
            //秒针旋转弧度
            var rad=PI/30*s;
            ctx.fillStyle="red";
            ctx.rotate(rad);
            ctx.moveTo(-2,-20);
            ctx.lineTo(2,-20)
            ctx.lineTo(0,280);
            ctx.closePath();
            ctx.fill();
            // 返回之前保存过的路径状态和属性
            ctx.restore();
        }
        //每秒刷新表盘，实现与系统时间同步
        setInterval("runClock()",1000);
        function runClock(){
            //获取时间对象
            var date=new Date();
            //获取小时数
            var hour=date.getHours();
            //获取分钟
            var minute=date.getMinutes();
            //获取秒数
            var second=date.getSeconds();
            //清除画布遗留内容
            ctx.clearRect(-width,-height,2*width,2*height);
            // ctx.rect(-width,-height,2*width,2*height);
            // ctx.fill();
            drawClockface();
            drawHourHand(hour,minute);
            drawMinuteHand(minute,second);
            drawSecondHand(second);
            // ctx.restore();
            
        }
        // drawClockface();
       
    </script>
</body>
</html>